<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Template</title>
</head>

<body>
    <div id="TemplateConfigPage" data-role="page" class="page type-interior pluginConfigurationPage"
        data-require="emby-input,emby-button,emby-select,emby-checkbox">
        <div data-role="content">
            <div class="content-primary">

                <div class="verticalSection verticalSection">
                    <div class="sectionTitleContainer flex align-items-center">
                        <h2 class="sectionTitle">MetaShark 配置</h2><span id="current_version" name="current_version"
                            is="emby-linkbutton" class="emby-button"></span>
                        <a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank"
                            href="https://github.com/cxfksword/jellyfin-plugin-metashark">源码</a>
                    </div>
                </div>

                <form id="TemplateConfigForm">
                    <fieldset class="verticalSection verticalSection-extrabottompadding">
                        <legend>
                            <h3>豆瓣</h3>
                        </legend>
                        <div class="inputContainer">
                            <label class="inputLabel inputLabelUnfocused" for="DoubanCookies">豆瓣网站cookie<span
                                    id="login_invalid"
                                    style="color: red; margin-left: 8px; display: none;">(已失效)</span></label>
                            <textarea rows="5" is="emby-input" type="text" id="DoubanCookies" name="DoubanCookies"
                                class="emby-input" placeholder="_vwo_uuid_v2=1; __utmv=2; ..."></textarea>
                            <div class="fieldDescription">可为空，填写可搜索到需登录访问的影片，使用(www.douban.com)分号“;”分隔格式cookie.</div>
                        </div>
                        <div class="inputContainer">
                            <label class="inputLabel inputLabelUnfocused" for="DoubanImageProxyBaseUrl">豆瓣图片代理地址</label>
                            <input id="DoubanImageProxyBaseUrl" name="DoubanImageProxyBaseUrl" type="text"
                                is="emby-input" placeholder="http://jellyfin.xxx.com" />
                            <div class="fieldDescription">可为空，填写jellyfin访问域名，只有使用了nginx代理或docker，且豆瓣图片没法显示时，才需要填写
                            </div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label class="emby-checkbox-label" for="EnableDoubanAvoidRiskControl">
                                <input id="EnableDoubanAvoidRiskControl" name="EnableDoubanAvoidRiskControl"
                                    type="checkbox" is="emby-checkbox" />
                                <span class="checkboxLabel" style="position:relative">启用防封禁
                                    <!-- <span
                                        style="width:24px;color:red;font-size:12px;position: absolute;top:-3px;margin-left:3px;">实险</span> -->
                                    <img style="position: absolute; top:-12px; width: 32px; height:32px"
                                        src=""
                                        alt="beta" />
                                </span>
                            </label>
                            <div class="fieldDescription">勾选后，刮削会变慢，适合刮削大量影片时使用，建议搭配网站cookie一起使用</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label class="emby-checkbox-label" for="EnableDoubanBackdropRaw">
                                <input id="EnableDoubanBackdropRaw" name="EnableDoubanBackdropRaw" type="checkbox"
                                    is="emby-checkbox" />
                                <span>背景图使用原图</span>
                            </label>
                            <div class="fieldDescription">原图豆瓣限制更严格，一般不建议开启</div>
                        </div>
                    </fieldset>

                    <fieldset class="verticalSection verticalSection-extrabottompadding">
                        <legend>
                            <h3>TheMovieDb</h3>
                        </legend>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label class="emby-checkbox-label" for="EnableTmdb">
                                <input id="EnableTmdb" name="EnableTmdb" type="checkbox" is="emby-checkbox" />
                                <span>启用从TheMovieDb获取元数据</span>
                            </label>
                            <div class="fieldDescription">勾选后，会尝试从TheMovieDb获取剧集元数据</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label class="emby-checkbox-label" for="EnableTmdbSearch">
                                <input id="EnableTmdbSearch" name="EnableTmdbSearch" type="checkbox"
                                    is="emby-checkbox" />
                                <span>显示TheMovieDb搜索结果</span>
                            </label>
                            <div class="fieldDescription">勾选后，识别时会同时返回TheMovieDb搜索结果</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label class="emby-checkbox-label" for="EnableTmdbBackdrop">
                                <input id="EnableTmdbBackdrop" name="EnableTmdbBackdrop" type="checkbox"
                                    is="emby-checkbox" />
                                <span>使用TheMovieDb补全背景图</span>
                            </label>
                            <div class="fieldDescription">勾选后，当影片在豆瓣找不到背景图时，改使用TheMovieDb的补全</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label class="emby-checkbox-label" for="EnableTmdbCollection">
                                <input id="EnableTmdbCollection" name="EnableTmdbCollection" type="checkbox"
                                    is="emby-checkbox" />
                                <span>从TheMovieDb获取电影系列信息</span>
                            </label>
                            <div class="fieldDescription">勾选后，刮削会变慢，会自动创建电影系列合集（需先在媒体库配置中打开<b>自动添加到合集</b>功能）</div>
                        </div>
                        <div class="checkboxContainer checkboxContainer-withDescription">
                            <label class="emby-checkbox-label" for="EnableTmdbOfficialRating">
                                <input id="EnableTmdbOfficialRating" name="EnableTmdbOfficialRating" type="checkbox"
                                    is="emby-checkbox" />
                                <span>从TheMovieDb获取影片分级信息</span>
                            </label>
                            <div class="fieldDescription">勾选后，刮削会变慢</div>
                        </div>
                        <div class="inputContainer">
                            <label class="inputLabel inputLabelUnfocused" for="TmdbApiKey">Api Key</label>
                            <input id="TmdbApiKey" name="TmdbApiKey" type="text" is="emby-input" />
                            <div class="fieldDescription">填写自定义Api Key，不填写会使用默认api key.(需重启才能生效)</div>
                        </div>
                        <div class="inputContainer">
                            <label class="inputLabel inputLabelUnfocused" for="TmdbHost">Api Host</label>
                            <input id="TmdbHost" name="TmdbHost" type="text" is="emby-input"
                                placeholder="api.tmdb.org" />
                            <div class="fieldDescription">
                                填写Api域名，可选api.tmdb.org/api.themoviedb.org，默认api.tmdb.org.(需重启才能生效)</div>
                        </div>
                    </fieldset>
                    <button is="emby-button" type="submit" class="raised button-submit block emby-button">
                        <span>Save</span>
                    </button>

                </form>
            </div>
        </div>
        <script type="text/javascript">
            var TemplateConfig = {
                pluginUniqueId: '9A19103F-16F7-4668-BE54-9A1E7A4F7556'
            };

            document.querySelector('#TemplateConfigPage')
                .addEventListener('pageshow', function () {
                    Dashboard.showLoadingMsg();
                    ApiClient.getPluginConfiguration(TemplateConfig.pluginUniqueId).then(function (config) {
                        $('#current_version').text("v" + config.Version);

                        document.querySelector('#DoubanCookies').value = config.DoubanCookies;
                        document.querySelector('#DoubanImageProxyBaseUrl').value = config.DoubanImageProxyBaseUrl;
                        document.querySelector('#EnableDoubanAvoidRiskControl').checked = config.EnableDoubanAvoidRiskControl;
                        document.querySelector('#EnableDoubanBackdropRaw').checked = config.EnableDoubanBackdropRaw;

                        document.querySelector('#EnableTmdb').checked = config.EnableTmdb;
                        document.querySelector('#EnableTmdbSearch').checked = config.EnableTmdbSearch;
                        document.querySelector('#EnableTmdbBackdrop').checked = config.EnableTmdbBackdrop;
                        document.querySelector('#EnableTmdbCollection').checked = config.EnableTmdbCollection;
                        document.querySelector('#EnableTmdbOfficialRating').checked = config.EnableTmdbOfficialRating;
                        document.querySelector('#TmdbApiKey').value = config.TmdbApiKey;
                        document.querySelector('#TmdbHost').value = config.TmdbHost;

                        checkDoubanLogin();

                        Dashboard.hideLoadingMsg();
                    });
                });

            document.querySelector('#TemplateConfigForm')
                .addEventListener('submit', function (e) {
                    Dashboard.showLoadingMsg();
                    ApiClient.getPluginConfiguration(TemplateConfig.pluginUniqueId).then(function (config) {
                        config.DoubanCookies = document.querySelector('#DoubanCookies').value;
                        config.DoubanImageProxyBaseUrl = document.querySelector('#DoubanImageProxyBaseUrl').value;
                        config.EnableDoubanAvoidRiskControl = document.querySelector('#EnableDoubanAvoidRiskControl').checked;
                        config.EnableDoubanBackdropRaw = document.querySelector('#EnableDoubanBackdropRaw').checked;

                        config.EnableTmdb = document.querySelector('#EnableTmdb').checked;
                        config.EnableTmdbSearch = document.querySelector('#EnableTmdbSearch').checked;
                        config.EnableTmdbBackdrop = document.querySelector('#EnableTmdbBackdrop').checked;
                        config.EnableTmdbCollection = document.querySelector('#EnableTmdbCollection').checked;
                        config.EnableTmdbOfficialRating = document.querySelector('#EnableTmdbOfficialRating').checked;
                        config.TmdbApiKey = document.querySelector('#TmdbApiKey').value;
                        config.TmdbHost = document.querySelector('#TmdbHost').value;
                        ApiClient.updatePluginConfiguration(TemplateConfig.pluginUniqueId, config).then(function (result) {
                            Dashboard.processPluginConfigurationUpdateResult(result);

                            checkDoubanLogin();
                        });
                    });

                    e.preventDefault();
                    return false;
                });

            function checkDoubanLogin() {
                let cookie = document.querySelector('#DoubanCookies').value
                if (!cookie || !$.trim(cookie)) {
                    $('#login_invalid').hide();
                    return;
                }


                $.getJSON("/plugin/metashark/douban/checklogin", function (resp) {
                    if (resp && resp.code != 1) {
                        $('#login_invalid').show();
                    } else {
                        $('#login_invalid').hide();
                    }
                })
            }
        </script>
    </div>
</body>

</html>